/**
 * 徽章类型
 */
export type BadgeType = 'dot' | 'rim'

/**
 * 徽章主题
 */
export type BadgeTheme = 'orange' | 'green' | 'cyan' | 'blue' | 'black' | 'gray'

/**
 * 徽章位置
 */
export type BadgePosition = typeof BADGE_POSITION[keyof typeof BADGE_POSITION]['key']
export const BADGE_POSITION = {
  before: {
    key: 'before',
    style: `
      position: relative !important;
      margin-right: 4px;
    `,
  },
  after: {
    key: 'after',
    style: `
      position: relative !important;
      margin-left: 4px;
    `,
  },
  top: {
    key: 'top',
    style: `
      position: absolute !important;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
    `,
  },
  bottom: {
    key: 'bottom',
    style: `
      position: absolute !important;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 50%);
    `,
  },
  topRight: {
    key: 'top-right',
    style: `
      top: 0;
      right: 0;
      transform: translate(50%, -50%);
    `,
  },
  topLeft: {
    key: 'top-left',
    style: `
      top: 0;
      left: 0;
      transform: translate(-50%, -50%);
    `,
  },
  bottomRight: {
    key: 'bottom-right',
    style: `
      bottom: 0;
      right: 0;
      transform: translate(50%, 50%);
    `,
  },
  bottomLeft: {
    key: 'bottom-left',
    style: `
      bottom: 0;
      left: 0;
      transform: translate(-50%, 50%);
    `,
  },
}

/**
 * 徽章组件属性
 */
export interface BadgeProps {
  id: string
  /**
   * 显示值
   * @default 0
   */
  value?: number | string
  /**
   * 徽章类型
   * @default 'rim'
   */
  type?: BadgeType
  /**
   * 主题颜色
   */
  theme?: BadgeTheme
  /**
   * 徽章位置
   * @default 'top-right'
   */
  position?: BadgePosition
  /**
   * 自定义颜色
   */
  color?: string
  /**
   * 值为0时是否显示
   * @default false
   */
  showZero?: boolean
  /**
   * 自定义样式
   */
  badgeStyle?: string
  /**
   * 最大值，超过显示 {max}+
   * @default 99
   */
  max?: number
  /**
   * 是否显示波纹效果
   * @default false
   */
  ripple?: boolean
}

/**
 * 默认属性
 */
export const DEFAULT_BADGE_PROPS: Partial<BadgeProps> = {
  value: 0,
  type: 'rim',
  position: 'top-right',
  showZero: false,
  max: 99,
  ripple: false,
  theme: 'orange',
}

/**
 * 主题颜色映射
 */
export const THEME_COLORS: Record<BadgeTheme, string> = {
  orange: '#ff5722',
  green: '#009688',
  cyan: '#2f4056',
  blue: '#1e9fff',
  black: '#393d49',
  gray: '#fafafa',
}
export const ANIMATION: string = `badgeRipple 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1)`
